<template>
	<view>
		<view class="top">
			<view class="top-left">
				<image :src="userData?userData.avatar :'../../static/headIcon.jpg'"></image>
				<text>{{userData?userData.nickname : ''}}</text>
			</view>
			<text class="top-text">团队人数：{{total}}</text>
		</view>
		<view class="category">
			<text>团队成员</text>
			<image src="http://hmh-app.oss-cn-beijing.aliyuncs.com/webStorage/web_16919967038911683.png" mode=""></image>
		</view>
		<view class="list">
			<view class="list-item" v-for="(item,index) in list" :key="index">
				<view class="list-item-left">
					<image :src="item.avatar"></image>
					<text>{{item.nickname}}</text>
				</view>
				<!-- 普通用户  vipType == null -->
				<view class="list-item-right" v-if="item.vipType == null">
					<view class="list-item-right-view1">普通用户</view>
					<image src="../../static/ptyh.png" mode=""></image>
				</view>
				<!-- plus会员  vipType == 1 -->
				<view class="list-item-right" v-if="item.vipType == 1">
					<view class="list-item-right-view2">plus会员</view>
					<image src="../../static/plushy.png" mode=""></image>
				</view>
				<!-- 代理商  vipType == 2 -->
				<view class="list-item-right" v-if="item.vipType == 2">
					<view class="list-item-right-view3">代理商</view>
					<image src="../../static/dls.png" mode=""></image>
				</view>
				<!-- 合伙人  vipType == 3 -->
				<view class="list-item-right" v-if="item.vipType == 3">
					<view class="list-item-right-view4">合伙人</view>
					<image src="../../static/hhr.png" mode=""></image>
				</view>
				<!-- 股东  vipType == 4 -->
				<view class="list-item-right" v-if="item.vipType == 4">
					<view class="list-item-right-view5">股东</view>
					<image src="../../static/wd_dj.png" mode=""></image>
				</view>
			</view>
			<view class="empty" v-if="showEmpty">
				<text>暂无数据</text>
			</view>
			<view class="loadmore" v-if="isLoadmore">
				<u-loadmore :status="status" :icon-type="flower"/>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userData:'',
				page:1,
				size:10,
				pageTotal:'',
				list:[],
				showEmpty:false,
				status: 'loading',
				isLoadmore:true,
				total:0,
				share:uni.getStorageSync('share')
			}
		},
		onLoad() {
			this.getUserInfo()
			this.getUserTeamList()
		},
		methods: {
			//团队
			async getUserTeamList(data){
				const params = {
					page:this.page,
					size:this.size
				}
				const res = await this.$u.api.getUserTeamList()
				this.total = res.total
				if (data==1) {
					this.list = res.rows
				}else{
					this.list = [...this.list,...res.rows]
				}
				this.pageTotal = Math.ceil(res.total/this.size)
				if (res.total < 10) {
					this.isLoadmore = false
				}
				if (res.total > 0) {
					this.showEmpty = false
				}else{
					this.showEmpty = true
				}
				this.status = 'nomore'
				uni.stopPullDownRefresh()
			},
			//用户信息
			async getUserInfo(){
				const res = await this.$u.api.getUserInfo()
				this.userData = res.data
			},
		},
		//下拉刷新
		onPullDownRefresh(){
			this.page = 1
			this.getUserTeamList(1)
		},
		//向上加载
		onReachBottom() {
			this.page = this.page + 1
			if (this.page <= this.pageTotal) {
				this.isLoadmore = true
				this.status = 'loading';
				setTimeout(()=>{
					this.getUserTeamList()
				},600)
			} else{
				
			}
		},
	}
</script>

<style scoped lang="scss">
    .top{
    	width: 750rpx;
    	height: 240rpx;
    	background: url('http://hmh-app.oss-cn-beijing.aliyuncs.com/webStorage/web_1691980195913787.png') no-repeat;
    	background-size: 100% 100%;
    	display: flex;
    	flex-direction: row;
    	align-items: center;
    	justify-content: space-between;
		padding: 0rpx 28rpx;
    }
	.top-left{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.top-left image{
		width: 116rpx;
		height: 116rpx;
		border-radius: 50%;
	}
	.top-left text{
		margin-left: 32rpx;
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #ffffff;
		line-height: 38rpx;
	}
	.top-text{
		font-size: 40rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #FEFEFE;
		line-height: 50rpx;
	}
	.category{
		padding: 50rpx 0rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.category text{
		font-size: 36rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #323232;
		line-height: 44rpx;
	}
	.category image{
		width: 40rpx;
		height: 4rpx;
		margin-top: 20rpx;
	}
	.list{
		margin: 0rpx 28rpx;
		padding-bottom: 50rpx;
	}
	.list-item{
		padding: 36rpx 0rpx;
		border-bottom: 1rpx solid #E3E3E3;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.list-item-left{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.list-item-left image{
		width: 88rpx;
		height: 88rpx;
		border-radius: 50%;
	}
	.list-item-left text{
		margin-left: 32rpx;
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #323232;
		line-height: 38rpx;
	}
	.list-item-right{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.list-item-right-view1{
		width: 120rpx;
		height: 36rpx;
		font-size: 20rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #4B5768;
		line-height: 32rpx;
		text-align: center;
		border-radius: 38rpx 0rpx 0rpx 38rpx;
		border-bottom: 1rpx solid #4B5768;
		border-top: 1rpx solid #4B5768;
		border-left: 1rpx solid #4B5768;
		margin-right: -20rpx;
	}
	.list-item-right-view2{
		width: 120rpx;
		height: 36rpx;
		font-size: 20rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #BD5A1C;
		line-height: 32rpx;
		text-align: center;
		border-radius: 38rpx 0rpx 0rpx 38rpx;
		border-bottom: 1rpx solid #BD5A1C;
		border-top: 1rpx solid #BD5A1C;
		border-left: 1rpx solid #BD5A1C;
		margin-right: -20rpx;
	}
	.list-item-right-view3{
		width: 120rpx;
		height: 36rpx;
		font-size: 20rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #2763D5;
		line-height: 32rpx;
		text-align: center;
		border-radius: 38rpx 0rpx 0rpx 38rpx;
		border-bottom: 1rpx solid #2763D5;
		border-top: 1rpx solid #2763D5;
		border-left: 1rpx solid #2763D5;
		margin-right: -20rpx;
	}
	.list-item-right-view4{
		width: 120rpx;
		height: 36rpx;
		font-size: 20rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #A95FE4;
		line-height: 32rpx;
		text-align: center;
		border-radius: 38rpx 0rpx 0rpx 38rpx;
		border-bottom: 1rpx solid #A95FE4;
		border-top: 1rpx solid #A95FE4;
		border-left: 1rpx solid #A95FE4;
		margin-right: -20rpx;
	}
	.list-item-right-view5{
		width: 120rpx;
		height: 36rpx;
		font-size: 20rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #9422CB;
		line-height: 32rpx;
		text-align: center;
		border-radius: 38rpx 0rpx 0rpx 38rpx;
		border-bottom: 1rpx solid #9422CB;
		border-top: 1rpx solid #9422CB;
		border-left: 1rpx solid #9422CB;
		margin-right: -20rpx;
	}
	.list-item-right image{
		width: 94rpx;
		height: 94rpx;
	}
	.empty{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-top: 350rpx;
	}
	.empty image{
		width: 238rpx;
		height: 76rpx;
	}
	.empty text{
		margin-top: 30rpx;
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 44rpx;
	}
</style>
